import { Form, Button, Radio,Select,DatePicker } from 'antd'
import locale from 'antd/es/date-picker/locale/zh_CN'
import {useState,useEffect} from 'react'
import http from '../../utils/http'
const { Option } = Select
const { RangePicker } = DatePicker
const FilterForm = ({onClick,data}) => {
const [channels, setChannels] = useState([])
useEffect(() =>{
  const getChannels = async () =>{
    const res = await http.get('/channels')
    setChannels(res.data.channels)
  }
  getChannels()
},[])
const onFinish = (values) => {
    onClick(values)
}
return(
    <>
    <Form initialValues={data} onFinish={onFinish}>
    <Form.Item label="状态" name="status">
        <Radio.Group>
        <Radio value={''}>全部</Radio>
        <Radio value={0}>草稿</Radio>
        <Radio value={2}>审核通过</Radio>
        </Radio.Group>
    </Form.Item>

    <Form.Item label="频道" name="channel_id">
        <Select
        placeholder="请选择文章频道"
        style={{ width: 120 }}
        >
        {channels.map(item =>(
        <Option key={item.id} value={item.id}>{item.name}</Option>
        ))}
        </Select>
    </Form.Item>

    <Form.Item label="日期" name="date">
        {/* 传入locale属性 控制中文显示*/}
        <RangePicker locale={locale}></RangePicker>
    </Form.Item>

    <Form.Item>
        <Button type="primary" htmlType="submit" style={{ marginLeft: 40 }}>
        筛选
        </Button>
    </Form.Item>
    </Form>
    </>
)
}
export default FilterForm